<template>
    <div class="searchNav-container">
        <div class="searchNav-title">
            <div class="searchNav-txt">
                <img src="./../images/search.png">
                <input ref="mysearch" placeholder="请输入">
            </div>
            <button @click="showSearch(false)">取消</button>
        </div>
        <div class="searchNav-box">
            <h1><img src="./../images/hot.png" ><span>热门搜索</span></h1>
            <ul>
                <li>111111</li>
                <li>8888</li>
                <li>ijvhvhssskkn</li>
                <li>kppkpj</li>
                <li>kppkp6666j</li>
                <li>kpkpj</li>
                <li>kppkpw222j</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SearchNav",
        props:{
            showSearch:Function
        },
        mounted(){
            this.$refs.mysearch.focus()
        }
    }
</script>

<style scoped lang="stylus">
    .searchNav-container
        width 100%
        height 100%
        background-color #fff
        position fixed
        top 0
        left 0
        z-index 1000
    .searchNav-title
        padding 10px 15px
        display flex
        flex-direction row
        align-items center
        border-bottom 1px solid #c7c7c7

        .searchNav-txt
            background-color #ededed
            border-radius 8px
            padding 8px
            display flex
            flex-direction row
            align-items center
            flex 3
            img
                width 10%
                margin-right 10px
            input
                width 100%
                height 30px
                background-color transparent
                border none
                outline none
                font-size 16px
        button
            border none
            background-color: #fff
            margin-left 15px
            font-size 16px
            color #aaa
    .searchNav-box
        padding 0 15px
        h1
            margin 20px 0
            font-size 18px
            display flex
            align-items center
            img
                width 8%
                margin-right 5px
        ul
            display flex
            flex-direction row
            flex-wrap wrap
            align-items center
            li
                padding 10px
                background-color #e0e0e0
                font-size 14px
                border-radius 25px
                margin 0 10px 10px 0


</style>